import React, { Component } from 'react'
import { getCateList } from '../../api/category'
import {CateBodyWrap} from './styledCategory'
export default class CateBody extends Component {
  state={
    dataSource:null,
    defaultItem:'',
    currentItem:''
   
  }
  static getDerivedStateFromProps(props,state){
    if(props.defaultItem!==state.defaultItem){
      console.log('props.defaultItem',props.defaultItem)
      console.log('state.defaultItem',state.defaultItem)
      console.log('state.currentItem',state.currentItem,)
      return {...state,defaultItem:props.defaultItem, currentItem:props.defaultItem}
    }
    return null
  }
  componentDidMount(){
    getCateList().then(res=>{
      let result =res.data.showapi_res_body
      this.setState({
        dataSource:result,
        currentItem:'口味特色'
      })
    })
  }
  handler =(item)=>{
    return ()=>{
      this.setState({
        currentItem:item
      })
    }
    
  }
  render() {
    console.log('dataSoure',this.state.dataSource)
    let data =this.state.dataSource?Object.keys(this.state.dataSource):[]
    {
      this.state.defaultItem==='口味特色'?
      data= data.slice(2,7)
      :
      data= data.slice(8)
    }
    
    let constant =this.state.dataSource?(Object.values(this.state.dataSource[this.state.currentItem]))[0]:[]
    console.log('data',data)
   
    console.log('constant',constant)
    
    return (
      <CateBodyWrap>
        <div className='left'>
          <ul>
            {
              data.map(value=>{
                return (
                  this.state.currentItem===value
                  ?
                  <li className='active' key={value} onClick={this.handler(value)}><span>{value}</span></li>
                  :
                  <li key={value} onClick={this.handler(value)}><span>{value}</span></li>
                  )
              })
            }
          
            
            
          </ul>
        </div>
        <div className='right'>
          <ul>
            {

              constant.map(value=>{
                return (
                <li key={value}>{value}</li>
                )
              })
              
            }
          
            
          </ul>
        </div>
      </CateBodyWrap>
    )
  }
}
